﻿.gradient(@from-color, @to-color, @from-position, @to-position) {
    background: @from-color; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url();
background: -moz-linear-gradient(top,  @from-color @from-position, @to-color @to-position); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(@from-position,@from-color), color-stop(@to-position,@to-color)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  @from-color @from-position,@to-color @to-position); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  @from-color @from-position,@to-color @to-position); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  @from-color @from-position,@to-color @to-position); /* IE10+ */
background: linear-gradient(to bottom,  @from-color @from-position,@to-color @to-position); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@from-color', endColorstr='@to-color',GradientType=0 ); /* IE6-8 */

}

html, body, div, ul, li, a, h1, p, span, input, button {
    margin: 0;
    padding: 0;
}

body {
    font-family: Cambria, 'Times New Roman', 'Nimbus Roman No9 L', 'Freeserif', Times, serif;
    font-size: 16px;

    ul {
        list-style-type: none;
    }

    #wrapper {
        width: 960px;

        div {
            border: 1px solid black;
            margin: 30px 30px;
            border-radius: 15px;
            width: 380px;
            .gradient(#eeeeee,#aaaaaa,0%, 100%);

            h1 {
                font-size: 1.8em;
                color: #555555;
                text-align: right;
                padding-top: 15px;
                padding-right: 21px;
            }

            .messages-list {
                display: block;
                margin-top: 10px;

                li {
                    display: block;
                    border: 1px solid black;
                    width: 215px;
                    border-radius: 16px;
                    padding-top: 5px;
                    margin-bottom: 6px;

                    p {
                        color: #555555;
                    }
                }
            }

            li.me-item {
                margin-left: 132px;
                padding-left: 15px;
                .gradient(#29edff, #c0faff, 0%,100%);

                span:first-of-type {
                    font-weight: bold;
                    color: #555555;
                    font-size: 1.1em;
                }

                span:last-of-type {
                    display: block;
                    color: #555;
                    font-size: 0.73em;
                    text-align: right;
                    margin-right: 15px;
                    margin-bottom: 5px;
                    letter-spacing: 1px;
                }
            }

            li.toshko-item {
                width: 200px;
                margin-left: 15px;
                padding-left: 15px;
                padding-right: 15px;
                .gradient(#dfffd2,#6fff3b, 0%, 100%);

                span:first-of-type {
                    display: block;
                    font-weight: bold;
                    color: #555555;
                    font-size: 1.1em;
                    text-align: right;
                }

                span:last-of-type {
                    display: block;
                    color: #555;
                    font-size: 0.73em;
                    text-align: left;
                    margin-right: 15px;
                    margin-bottom: 5px;
                    letter-spacing: 1px;
                }
            }

            input {
                background-color: #eee;
                border: none;
                border-radius: 5PX;
                display: inline-block;
                color: #555;
                padding: 10px 0 10px 15px;
                width: 260px;
                margin-top: 1px;
                margin-left: 15px;
                margin-bottom: 7px;
            }

            button {

                &:hover {
                    background: #eeeeee;
                }

                border: none;
                border-radius: 5px;
                height: 35px;
                .gradient(#ededed,#aaaaaa, 0%, 100%);
                font-size: 1.1em;
                padding: 6px 15px;
            }
        }
    }
}

